// components/line-chart/line-chart.js
import chart_data from '../../libs/data_chart'

Component({
  properties: {

  },
  data: {
    line_data: [{
      date: '2019/11/10',
      personNum: 400,
      type: '预测'
    }, {
      date: '2019/11/10',
      personNum: 500,
      type: '实际'
    }]
  },
  ready: function (params) {
    this.initLineChart()
  },
  methods: {
    //初始化LineChart
    initLineChart(params) {
      this.chartComponent = this.selectComponent('#line-chart');
      this.chartComponent.init((canvas, width, height, F2) => {
        //此处data数据可通过 异步获取数据
        const chart = new F2.Chart({
          el: canvas,
          width,
          height,
          animate: false,
          appendPadding: 20
        });
        this.initLineData(chart)
        this.initLinePoint(chart)
        this.initToolTip(chart)
        this.initLegend(chart)
        chart.render();
        this.setDefaultToolTip(chart)
        return chart;
      })
    },
    //设置数据
    initLineData(chart) {
      /**
       * 左右平移
       * https://f2.antv.vision/zh/docs/api/chart/interaction  'pan'
       */
      const line_data = chart_data.line_data
      console.log(line_data[0])
      chart.interaction('pan');
      chart.source(line_data, {
        dateNum: {
          // type: 'timeCat',
          range: [0.05, 0.95],
          tickCount: 8,
          min: 20191110,
          max: 20191117,
          formatter: function formatter(val) {
            var valStr = val.toString().replace('2019', '')
            valStr = valStr.slice(0, 2) + '-' + valStr.slice(2)
            // console.log("initLineData" + valStr)
            return valStr;
          }
        },
        personNum: {
          min: 0
        }
      });
      // 定义进度条
      chart.scrollBar({
        mode: 'x',
        xStyle: {
          offsetY: -5
        }
      });
    },
    //设置线条和点
    initLinePoint(chart) {
      chart.line().position('dateNum*personNum').color('type',
          function (type) {
            if (type === '预测') {
              return '#FDCD95';
            } else {
              return '#01BCB2';
            }
          })
        .shape('type', function (type) {
          if (type === '预测') {
            return 'dash';
          } else {
            return 'line';
          }
        });
      chart.point()
        .position('dateNum*personNum')
        .style('type', {
          lineWidth: 1,
          fill: function fill(val) {
            if (val === '预测') {
              return '#fff';
            } else {
              return '#01BCB2';
            }
          },
          stroke: function fill(val) {
            if (val === '预测') {
              return '#FDCD95';
            } else {
              return '#01BCB2';
            }
          }
        });
    },
    //设置提示文本
    initToolTip(chart) {
      chart.tooltip({
        showTitle: true,
        showCrosshairs: true, //是否显示辅助线
        showItemMarker: true, //显示图例里面的颜色
        showTooltipMarker: false, //没看到效果
        layout: 'vertical',
        background: {
          radius: 3,
          fill: 'gray',
          padding: [3, 5]
        },
        titleStyle: {
          fontSize: 13,
          fill: '#fff',
          textAlign: 'start',
          textBaseline: 'top'
        },
        onShow(ev) {
          const {
            items
          } = ev;
          // console.log("onShow", ev)
          items.splice(2, 2); // 去掉最后两项
        }
      });
    },
    //设置图例
    initLegend(chart) {
      chart.legend('type', {
        position: 'top',
        align: 'right',
        itemWidth: 50,
        offsetY: 7,
        marker: {
          symbol: 'square', // marker 的形状
          radius: 5 // 半径大小
        }
      });
    },
    //设置默认选中提示文本
    setDefaultToolTip(chart) {
      // 默认展示 tooltip
      const item = {
        date: "2019/11/14",
        personNum: 400,
        type: "预测",
        dateNum: 20191114
      };
      // 要展示 tooltip 的数据
      const point = chart.getPosition(item);
      chart.showTooltip(point); // 展示该点的 tooltip
    }
  }
})